<template>
	
	<view>
		<image src="/static/img/close.png" mode="" @click="goback" style="width: 40rpx;height: 40rpx;position: fixed;top: 35px;left: 15px;z-index: 100;"></image>
		<view style="text-align: center;margin-bottom: 40px;overflow: hidden;">
			<image src="/static/img/loginlog.png" mode="" style="width: 165rpx;height: 165rpx;margin-top: 120rpx;"></image>
			<br />
			<image src="/static/img/loginlog1.png" mode="" style="width: 162.5rpx;height: 50rpx;margin-top: 20rpx;"></image>
		</view>
		<view class="container">
			<!-- #ifdef APP-PLUS || H5-->
			<view v-if="platform === 'ios' && !isNvue" class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">手机号</text></view>
				<view class="uni-input-wrapper"><input type="number" class="uni-input" :class="{select:focid == 1}" :focus="focid == 1" placeholder="请输入手机号码" @focus="onFocus(1)" @blur="onBlur" v-model="query.phone" /></view>
			</view>
			<view class="uni-form-item uni-column" v-else>
				<view class="title"><text class="uni-form-item__title">手机号</text></view>
				<view class="uni-input-wrapper"><input type="number" class="uni-input" :class="{select:focid == 1}" :focus="focid == 1" @focus="onFocus(1)" @blur="onBlur" placeholder="请输入手机号码" v-model="query.phone" /></view>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS || H5-->
			<view v-if="platform === 'ios' && !isNvue" class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">密码</text></view>
				<view class="uni-input-wrapper"><input class="uni-input" password :class="{select:focid == 2}"  :focus="focid == 2" placeholder="请输入密码" @focus="onFocus(2)" @blur="onBlur" v-model="query.pass" /></view>
			</view>
			<view class="uni-form-item uni-column" v-else>
				<view class="title"><text class="uni-form-item__title">密码</text></view>
				<view class="uni-input-wrapper"><input class="uni-input" password :class="{select:focid == 2}"  :focus="focid == 2" @focus="onFocus(2)" @blur="onBlur" placeholder="请输入密码" v-model="query.pass" /></view>
			</view>
			<!-- #endif -->
			<view class="Toolssss">
				<navigator url="/pages/login/forgot?type=true" style="float: left;">验证码登录</navigator>
				<navigator url="/pages/login/forgot">忘记密码?</navigator>
			</view>
			<button
				@tap="sub"
				style="width: calc(100% - 20px);display: block;margin: 0px 10px;margin-top: 60px;background: #046ef6;border-radius: 15px;color: #fff;"
				type="default"
			>
				登录
			</button>
			<view class="check">
				<label style="line-height: 18px;" @tap="$go('/pages/login/var')">
					<span :class="{ active: $store.state.vars }" style=""></span>
					我已同意
				</label>
				<navigator url="/pages/login/var">《免责声明》</navigator>
			</view>
			<view style="padding: 0 13px;font-size: 15px;margin-top: 20px;">
				还没有账号？
				<navigator url="/pages/login/relogin" style="color: #168dea;display: inline-block;">立即注册</navigator>
			</view>
		</view>
		<image class="img1 imgs" src="../../static/img/quan1.png" mode=""  :animation="animationData"></image>
		<image class="img2 imgs" src="../../static/img/quan3.png" mode="" :animation="animationData1"></image>
		<image class="img3 imgs" src="../../static/img/quan2.png" mode=""></image>
		
		
		<image class="img4 imgs" src="../../static/img/quan1.png" mode=""  :animation="animationData"></image>
		<image class="img5 imgs" src="../../static/img/quan3.png" mode="" :animation="animationData1"></image>
<!-- 		
		<image class="img6 imgs" src="../../static/img/quan1.png" mode=""  :animation="animationData"></image>
		<image class="img7 imgs" src="../../static/img/quan3.png" mode="" :animation="animationData1"></image> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			platform: '',
			isNvue: false,
			query: {
				phone: '',
				pass: ''
			},
			animationData: {},
			animationData1: {},
			animation:{},
			animation1:{},
			focid:0
		};
	},
	onShow: function(){
		uni.setNavigationBarTitle({
		    title: ''
		});
		var i = 0;
	    this.animation = uni.createAnimation({
			duration: 2000,
	        timingFunction: 'ease',
	    })
		this.animation1 = uni.createAnimation({
			duration: 2000,
		    timingFunction: 'ease',
		})
		this.animation.scale(1,1).rotate(90).step()
		this.animationData = this.animation.export()
		
		this.animation1.scale(1.2,1.2).rotate(-90).step()
		this.animationData1 = this.animation1.export()
		
	    setInterval(function(){
			i++;
			if(i%2==0){
				this.animation.scale(1,1).rotate(90).step()
				this.animationData = this.animation.export()
				
				this.animation1.scale(1.2,1.2).rotate(-90).step()
				this.animationData1 = this.animation1.export()
			}else{
				this.animation.scale(1.2,1.2).rotate(-90).step()
				this.animationData = this.animation.export()
				
				this.animation1.scale(.7,.7).rotate(90).step()
				this.animationData1 = this.animation1.export()									
			}
		}.bind(this),3000);
	  },
	methods: {
		goback(){
			uni.navigateBack()
		},
		onFocus(idx) {
			this.focid = idx;
			// #ifdef APP-PLUS
			this.$mp.page.$getAppWebview().setStyle({
				softinputNavBar: 'none'
			});
			// #endif
		},
		onBlur() {
			// this.focid = 0;
			// #ifdef APP-PLUS
			this.$mp.page.$getAppWebview().setStyle({
				softinputNavBar: 'auto'
			});
			// #endif
		},
		sub() {
			var _this = this;
			if(this.query.phone == ''){
				uni.showToast({
					title: '手机号不能为空!',
					icon: 'none'
					// position:'top'
				});
				this.focid = 1;
				return;
			}
			if (!/^1[3456789]\d{9}$/.test(this.query.phone)) {
				uni.showToast({
					title: '手机号码格式错误!',
					icon: 'none'
					// position:'top'
				});
				this.focid = 1;
				return;
			}
			if (!this.query.pass) {
				uni.showToast({
					title: '密码不能为空！',
					icon: 'none'
					// position:'top'
				});
				this.focid = 2;
				return;
			}
			if(!this.$store.state.vars){
				uni.showToast({
					title: '请阅读并同意免责声明',
					icon: 'none'
					// position:'top'
				});
				return;
			};
			uni.request({
				url: this.$store.state.url+'/api/shequuser/login/in', //检查更新的服务器地址
				method: 'POST',
				data: JSON.stringify({
					faccount:this.query.phone,
					fpwd:this.query.pass,
					fcode:''
				}),
				success: res => {
					res = res.data;
					// console.log(res)
					if(res.code == 200){
						uni.showToast({
							title: '登录成功',
							icon: 'none'
							// position:'top'
						});
						setTimeout(function(){
							_this.$store.commit('setuser',res.data);
							uni.switchTab({
							    url: '/pages/center/center'
							});
						},800)
						
					}else{
						if(res.code == 401){
							//验证码
							
						}else if(res.code == 402){
							//账户
							_this.focid = 1;
						}else{
							//密码
							_this.focid = 2;
						};
						uni.showToast({
							title: res.msgs,
							icon: 'none'
							// position:'top'
						});
					}
					
				},
				fail: res => {
					uni.showToast({
						title: '服务器错误！',
						icon: 'none'
						// position:'top'
					});
				}
			});
		}
	},
	onLoad() {
		this.platform = uni.getSystemInfoSync().platform;
		// #ifdef APP-PLUS-NVUE
		this.isNvue = true;
		// #endif
	}
};
</script>

<style scoped>
.Toolssss,
.check {
	padding: 8px 12px;
	font-size: 14px;
}
.Toolssss > uni-text {
	float: left;
}

.Toolssss > uni-navigator {
	float: right;
}
.container {
	padding: 10upx;
}
.check {
	display: flex;
	flex-direction: row; /*这里可以不写，flex布局默认方向横向即row*/
	justify-content: center;
	align-items: center;
	margin-top: 15px;
}
.check label {
	font-size: 15px;
}

.check label span {
	width: 18px;
	height: 18px;
	display: block;
	float: left;
	background: #ccc;
	border-radius: 50%;
	margin-right: 5px;
	text-align: center;
	color: #fff;
}
.check label span.active {
	background: #046ef6;
}
.check label span.active::before {
	content: '✓';
	font-size: 12px;
}
.check > uni-navigator {
	color: #168dea;
	font-size: 15px;
}
.nvue-page-root {
	background-color: #f8f8f8;
	padding-bottom: 20px;
}

.page-title {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 35rpx;
}

.page-title__wrapper {
	padding: 0px 20px;
	border-bottom-color: #d8d8d8;
	border-bottom-width: 1px;
}

.page-title__text {
	font-size: 16px;
	height: 48px;
	line-height: 48px;
	color: #bebebe;
}

.title {
	padding: 0px 13px;
}
.uni-form-item {
	margin-top: 20px;
}
.uni-form-item__title {
	font-size: 16px;
	line-height: 24px;
}

.uni-input-wrapper {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	padding: 2px 13px;
	flex-direction: row;
	flex-wrap: nowrap;
	width: auto;
	background-color: #ffffff;
}

.uni-input {
	height: 45px;
	line-height: 45px;
	font-size: 15px;
	padding: 0px;
	flex: 1;
	background-color: #ffffff;
	border-bottom: 1px solid #eee;
}
.uni-input.select{
	border-bottom: 1px solid #007aff;
}
.uni-input:hover {
	border-bottom: 1px solid #007aff;
}
.uni-icon {
	font-family: uniicons;
	font-size: 24px;
	font-weight: normal;
	font-style: normal;
	width: 24px;
	height: 24px;
	line-height: 24px;
	color: #999999;
}

.uni-eye-active {
	color: #007aff;
}
.img1{width: 120px;height: 120px;top: 120px;right: -70px;}
.img2{width: 170px;height: 170px;top: 95px;right: -95px;}

.img4{width: 170px;height: 170px;top: 50px;left: -70px;}
.img5{width: 220px;height: 220px;top: 25px;left: -95px;}

.img6{width: 100px;height: 100px;top: 250px;left: 70px;}
.img7{width: 220px;height: 220px;top: 225px;left: 15px;}

.img3{width: 270px;height: 270px;top: -120px;left: -80px;}
.imgs{position: fixed;}
</style>
